<template>
    <div class="mobileUpload flex-row align-center-row">
        <div class="uploader_item" v-for="(item,index) in tempImgs" :key="index">
            <img :src="item.image_url" class="avatar" />
            <div class="uploader_icon">
                <span class="uploader_icon_item">
                    <van-uploader :after-read="(file, fileList) => {onRead(file, fileList, 'replace')}" accept="image/*" @click="getIndex(index)" style="width:1.02rem;height:1.02rem">
                    </van-uploader>
                </span>
                <span class="uploader_icon_item" style="margin-left:.43rem;" @click="deleteImage(index)">
                    <van-icon name="delete" color="#dcdee0" style="font-size:1.1rem"/>
                </span>
            </div>
        </div>
        <van-uploader v-if="Number(imgLimit)>tempImgs.length" :max-count="Number(imgLimit)-tempImgs.legth" :after-read="(file, fileList) => {onRead(file, fileList, 'add')}" accept="image/*" style="width:4.8rem;height:4.8rem;">
        </van-uploader>
    </div>
</template>
<script>
import {Base64} from "js-base64";
import {
    LocalStorage
} from "@/utils/storage";
export default {
    name: "mobileUpload",
    props: {
        imgLimit:Number,
        keyWord: String,
        warnTxt: String,
        defaultData:{
            type:Array,
            // eslint-disable-next-line vue/require-valid-default-prop
            default:[]
        },
        beforeUpload: Function,
        imageRemove: Function,
        uploadSucc:Function
    },
    data() {
        return {
            dialogVisible: false,
            dialogImageUrl: "",
            index:0,
            tempImgs: [],
            fileAccept: '.doc,.docx,.pdf,.jpg', // 上传的文件类型
            fileList: [], // 文件列表
        }
    },
    mounted() {
    },
    watch:{
        defaultData:{
            handler(){
                if(this.defaultData.length>0){
                    this.tempImgs = this.defaultData;
                    console.log(this.tempImgs)
                }
            },
            immediate:true
        }
    },
    methods: {
        //删除图片
        deleteImage(index) {
            this.imageRemove(this.keyWord,index);
        },
        //获取重新上传序号
        getIndex(index){
            this.index = index;
        },
        onRead(file, fileList, type) {
            let data = LocalStorage.read('ossParams');
            if (!data) {
                this.$message.error('上传失败，缺少ossParams')
                return;
            }
            data = JSON.parse(Base64.decode(data));
            let _file;
            if (file.length) {
                file.forEach(item => {
                    _file = {
                        name: item.file.name,
                        raw: item.file
                    }
                    this.$upload(data, _file).then(res => {
                        if(type&&type === 'add'){
                            this.uploadSucc(this.keyWord,this.index,{image_url:res},'add');
                        } else if (type&&type === 'replace'){
                            this.uploadSucc(this.keyWord,this.index,{image_url:res},'replace');
                        }
                    })
                })
            } else {
                _file = {
                    name: file.file.name,
                    raw: file.file
                }
                this.$upload(data, _file).then(res => {
                    if(type&&type === 'add'){
                        this.uploadSucc(this.keyWord,this.index,{image_url:res},'add');
                    } else if (type&&type === 'replace'){
                        this.uploadSucc(this.keyWord,this.index,{image_url:res},'replace');
                    }
                })
            }
        },
    }
}
</script>
<style lang="less">
.mobileUpload{
    width:100%;
    height:auto;
}
.el-upload{
    border: 1px solid #e3e3e3;
}
.mobileUpload .uploader_item{
    position:relative;
    overflow:hidden;
    background-color:#fff;
    border:1px solid #c0ccda;
    border-radius:6px;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    margin-right:.43rem;
    width:4.8rem;
    height:4.8rem;
    transition: all .5s cubic-bezier(.55,0,.1,1);
}
.mobileUpload .reupload_icon{
    width:.53rem;
    height:.59rem;
}
.mobileUpload .reupload_icon .el-upload{
    width:.53rem;
    height:.59rem;
    display:flex;
    justify-content:center;
    align-items:center;
}
.mobileUpload .reupload_icon .el-upload__input{
    width:.53rem;
    height:.59rem;
}
.mobileUpload .avatar-uploader{
    width:4.8rem;
    height:4.8rem;
    display:inline-block;
    box-sizing:border-box;
}
.mobileUpload .avatar-uploader .el-upload{
    width:4.8rem;
    height:4.8rem;
    box-sizing:border-box;
    border-radius:.16rem;
    cursor:pointer;
    position:relative;
    overflow:hidden;
    background-color:#fbfdff;
    border:1px dashed #c0ccda;
}
.mobileUpload .avatar-uploader .el-upload:hover{
    border-color: #409eff;
}
.mobileUpload .avatar-uploader-icon{
    font-size:.75rem;
    color:#8c939d;
    width:4.8rem;
    height:4.8rem;
    line-height:4.8rem;
    text-align: center;
}
.mobileUpload .avatar{
    width:4.8rem;
    height:4.8rem;
    display:block;
    object-fit:cover;
}
.mobileUpload .upload_box{
    height:4.8rem;
    display:flex;
    align-items:flex-end;
}
.mobileUpload .uploader_icon{
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    cursor:default;
    text-align:center;
    color:#fff;
    opacity:0;
    font-size:.53rem;
    background-color:rgba(0, 0, 0, 0.5);
    -webkit-transition:opacity 0.3s;
    transition:opacity 0.3s;
    display:flex;
    justify-content:center;
    align-items:center;
}
.mobileUpload .uploader_icon:hover{
    opacity:1;
}
.mobileUpload .uploader_icon::after{
    display:inline-block;
    content:"";
    height:100%;
    vertical-align:middle;
}
.mobileUpload .uploader_icon_item{
    width:1.02rem;
    height:1.02rem;
    cursor:pointer;
    position:relative;
    display:flex;
    align-items:center;
    .van-uploader__wrapper{
        width:100%;
        height:100%;
        .van-uploader__upload{
            width:100%;
            height:100%;
        }
    }
    .van-icon-delete{
        font-size:1.1rem;
    }
}
.van-uploader__upload {
    margin-right:0;
    width:4.8rem;
    height:4.8rem;
    background-color:#fff;
    border:1px solid #e3e3e3;
    border-radius:.1rem;
}
.mobileUpload .uploader_icon_item .van-uploader__upload {
    background-color:transparent;
    border:none;
}
.van-uploader__upload-icon{
    font-size:1.04rem;
}
</style>